<template>
	<view class="col" style="position: relative;">
		<view class="title row-h-center ">
			<view class="title-cart row-center">
				<image src="/static/images/cart2.png" class="title-cart-img"></image>
			</view>
			<view class="title-text">
				海源粮油公司
			</view>
		</view>
		
		<view class="row" style="margin: 20rpx 20rpx 0 20rpx;">
			<view :class="typeIndex==0?'type-y':'type-n'" @click="typeIndex=0">订单</view>
			<view :class="typeIndex==1?'type-y':'type-n'" @click="typeIndex=1">收款</view>
			<view :class="typeIndex==2?'type-y':'type-n'" @click="typeIndex=2">本月交易明细</view>
		</view>
		
		<view class="row-between-center"  style="margin: 20rpx 20rpx 0 20rpx;" v-if="typeIndex==0">
			<u-input class="input" prefixIcon="search" placeholder="搜索" border="none" prefixIconStyle="margin-left:26rpx">
				<template slot="suffix">
					<view class="search row-center">
						搜索
					</view>
				</template>
			</u-input>
			<view class="filter row-center">
				<image class="filter-img" src="/static/images/filter.png"></image>
			</view>
		</view>
		<view class="line"></view>
	
		<view class="row">
			<view class="item col" v-if="typeIndex==0">
				<view class="row-center" :class="index==stepIndex?'step-status':'step-status-n'" v-for="item,index in stepList" style="white-space:pre-wrap;width: 128rpx;" @click="changeStep(index)">
					{{item.name}}
				</view>
			</view>
			
			<view class="item col" v-if=" typeIndex==1">
				<view class="row-center" :class="index==stepIndex?'step-status':'step-status-n'" v-for="item,index in inTypeList" style="white-space:pre-wrap;width: 128rpx;" @click="changeStep(index)">
					<u-badge  max="99" :value="3"   :offset=[-5,0] :absolute="true"></u-badge>
					{{item.name}}
					
				</view>
			</view>
			
			
			<view  v-if="typeIndex==0" style="width: 100%;">
				<view class="item1 col" v-for="item in 3" @click="goOrderDetail()">
					<view class="row-between-center">
						<view class="row-center">
							<view class="cart row-center">
								<image src="/static/images/cart.png" class="cart-image"></image>
							</view>
							<view class="item1-title">这是采购商名称</view>
						</view>
						<view class="item1-status">
							待我确认
						</view>
						
					</view>
					
					<view class="row-between-center" style="margin-top: 22rpx;">
						<view class="item1-key">订单编号：<span class="item1-value">2888888</span></view>
						<view class="price">20000</view>
					</view>
					
					<view class="item1-key">商品总数：<span class="item1-value">2888888</span></view>
					<view class="item1-line"></view>
				</view>
			</view>
			
			<view  v-if="typeIndex==1" style="width: 100%;">
				<view class="item1 col" v-for="item in 3">
					<view class="row-between-center">
						<view class="row-center">
							<view class="cart row-center">
								<image src="/static/images/shoukuan.png" class="cart-image"></image>
							</view>
							<view class="item1-title">2023-09-12</view>
						</view>
						<view class="item1-status2">
							待我确认收款
						</view>
						
					</view>
					
					<view class="row-between-center" style="margin-top: 22rpx;">
						<view class="item1-key">采购商：<span class="item1-value">青岛露露食品店</span></view>
						<view class="price">20000</view>
					</view>
					
					<view class="item1-key">备注：<span class="item1-value">优惠300元</span></view>
				
					<view class="row-end" style="margin-top: 20rpx;">
						<view class="real row-center">
							查看收款凭证截图
						</view>
						<view class="reject row-center">
							驳回
						</view>
						<view class="sure row-center">
							确认
						</view>
					</view>
					
						<view class="item1-line"></view>
					
				</view>
			</view>
			
			
			<scroll-view :scroll-x="true" v-if="typeIndex==2" style="white-space: nowrap;">
				<view class="col"  >
					<view class="row item3" style="background-color:#F7F8FC;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);">
						<view class="box1 row-center" style="position: fixed;z-index: 99;background: #F7F8FC;" >
							日期
						</view>
						<view class="box2 row-center" style="margin-left: 118rpx;">
							业务摘要
						</view>
						<view class="box2 row-center">
							货款金额
						</view>
						<view class="box2 row-center">
							付款金额
						</view>
						<view class="box2 row-center" style="background: #F7F8FC;">
							货款余额
						</view>
					</view>
					<view class="row" v-for="item,index in 4">
						<view class="row item3"  v-if="typeIndex==2">
							<view class="box1 num1 row-center"  :style="index%2!=0?'background: #F7F8FC;':'background: #fff;'  " >
								09-01
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'" style="margin-left: 118rpx;">
									期初余额
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view> 
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	
	
	<view class="bottom row-between-center" style="width: 100%;padding: 20rpx;">
		<view class="col-center" @click="goCreate">
			<view class="bottom-bg row-center">
				<image src="/static/images/cjyy.png" class="bottom-img"></image>
			</view>
			<view class="bottom-text">创建邀约订单</view>
		</view>
		
		<view class="col-center">
			<view class="bottom-bg row-center">
				<image src="/static/images/blysh.png" class="bottom-img"></image>
			
			</view>
				<view class="bottom-text">补录已收货订单</view>
		</view>
		
		<view class="col-center" @click="goNotice">
			<view class="bottom-bg row-center">
				<image src="/static/images/fqsk.png" class="bottom-img"></image>
			</view>
			<view class="bottom-text">发起收款通知</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeIndex:0,
				stepList:[
					{'name':'全部'},
						{'name':'待我确认'},	{'name':'待采购商\n确认'},	{'name':'待发货'},	{'name':'待发货'},
						{'name':'已收货'},	{'name':'退货待审核'},	{'name':'已驳回'},	
				],
				
				inTypeList:[
					{'name':'全部'},
						{'name':'待我确认'},	{'name':'待我确认\n收款'},	{'name':'待采购商\n确认收款'},	{'name':'已确认收款'},
						{'name':'已驳回收款'},	{'name':'撤回待供\n应商确认'},	{'name':'撤回待采\n购商确认'},	{'name':'已撤回收款'},	
				],
				
				stepIndex:0
			}
		},
		methods: {
			changeStep(index){
				this.stepIndex = index
			},
			goOrderDetail(){
				uni.navigateTo({
					url:'/src/pages/sale/sale_order_detail'
				})
			},
			goNotice(){
				uni.navigateTo({
					url:'/src/pages/sale/create_notice'
				})
			},
			goCreate(){
				uni.navigateTo({
					url:'/src/pages/sale/create_order'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title{
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 88rpx;
		flex-shrink: 0;
		background-color: #F5F8FF;
		.title-cart{
			margin-left: 40rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background: #C9CBFF;
		}
		.title-cart-img{
			width: 28rpx;
			height: 28rpx;
		}
		.title-text{
			margin-left: 20rpx;
			color:  #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 157.143% */
		}
	}
	
	.type-n{
		margin-right: 20rpx;
		padding: 8rpx 32rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E6E6E6;
		background: #F2F3F8;
		color: #6A6876;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.type-y{
		margin-right: 20rpx;
		padding: 8rpx 32rpx;
		border-radius: 8rpx;
		background: #3B60D3;
		color: #FFF;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.line{
		margin-top: 26rpx;
		width: 100%;
		height: 1rpx;
		background: #E4E8FC;
	}
	.input {
		padding-left: 26rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F6F7FB;
	}
	.search {
		color: #FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
		width: 88rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #3B60D3;
	}
	.filter{
		margin-left: 40rpx;
		margin-right: 34rpx;
		width: 60rpx;
		flex-shrink: 0;
		height: 60rpx;
		border-radius: 8rpx;
		background: #F6F7FB;
		.filter-img{
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.item{
		margin-left: 20rpx;
		.step-status{
			position: relative;
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			background: #3B60D3;
			flex-shrink: 0;
			color: #FFF;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx; /* 127.273% */
		}
		.step-status-n{
			position: relative;
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.20);
			background: #F2F3F8;
			width: 64rpx;
			color: #20252B;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx; /* 127.273% */
		}
		
	}
	.item1{
		margin-top: 30rpx;
		margin-right: 20rpx;
		margin-left: 52rpx;
		.cart{
			width: 40rpx;
			height: 40rpx; 
			border-radius: 50%;
			background-color: #F2F3F8;
			.cart-image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		.item1-title{
			margin-left: 18rpx;
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx; /* 166.667% */
		}
		.item1-status{
			padding: 0 16rpx;
			border-radius: 8rpx;
			background: #fce7d7;
			color: #F08537;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 36rpx; /* 180% */
		}
		.item1-key{
			color: #A3AAB0;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 200% */
		}
		.item1-value{
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 200% */
		}
		.price{
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx; /* 142.857% */
		}
		.item1-line{
			margin-top: 30rpx;
			height: 1rpx;
			background: #E4E8FC;
		}
		
		.real{
				margin-right: 20rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			background: #F2F3F8;
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.reject{
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background: #F5222D;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.sure{
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background:  #3B60D3;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.reject-apply{
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background:  #6A6876;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.item1-status2{
			padding: 0 16rpx;
			border-radius: 8rpx;
			background: #daedd1;
			color: #46A719;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 36rpx; /* 180% */
		}
	}
	
	.item3{
		position: relative;
		.box1{
			flex-shrink: 0;
			width: 116rpx;
			height: 72rpx;
		}
		.box2{
			flex-shrink: 0;
			width: 200rpx;
			height: 72rpx;
		}
		.border-right{
			border-bottom: 0.3px solid #D7D8DD;
			border-right: 0.3px solid #D7D8DD;
			background: #F7F8FC;
		}
		.bg1{
			background: #F7F8FC;
		}
		.bg2{
			background: white;
		}
		.num1{
			position: fixed;z-index: 99;box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.08);
		}
	}
	.bottom{
		position: fixed;
		bottom: 0;
		height: 128rpx;
		flex-shrink: 0;
		border-top: 1rpx solid #EFEFEF;
		background: #FFF;
		box-shadow: 0px -8rpx 8rpx 0px rgba(0, 0, 0, 0.04);
		.bottom-bg{
			background-color:  #F2F3F8;
			border-radius: 50%;
			width: 48rpx;
			height: 48rpx;
		}
		.bottom-img{
			width: 24rpx;
			height: 24rpx;
		}
		.bottom-text{
			margin-top: 22rpx;
			color: #676C7F;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
	}
</style>
